<template>
    <div class="common-container">
        <div class="header">
            <div class="header_left">
                <el-input v-model.trim="search_val.name" placeholder="请输入工单名称" size="small" clearable @clear="clearImei"
                    style="width: 220px" maxlength="50">
                    <el-button slot="append" :icon="loadingSearch ? 'el-icon-loading' : 'el-icon-search'"
                        @click="searchClick"></el-button>
                </el-input>

                <el-popover placement="bottom" width="460" trigger="click" style="margin-left: 0px"
                    popper-class="popover" size="small" v-model="showPopover">
                    <div>
                        <el-form label-width="70px" style="margin: 20px 0" class="popover_from">

                            <el-form-item size="small" label="组织机构"
                                v-if="user.roleName === 'TENANT_ADMIN' || user.roleName === 'ORG_ADMIN'">
                                <TreeSearch style="width: 360px;margin-left: 15px;" ref="refTreeSearch"
                                    @changeOrgId="changeOrgId">
                                </TreeSearch>
                            </el-form-item>

                            <el-form-item size="small" label="联网单位">
                                <el-select size="small" style="width: 360px;margin-left: 15px;" clearable
                                    v-loadMore="loadMore" v-model='search_val.selectedValue' placeholder='请选择联网单位'
                                    filterable remote :remote-method="remoteMethod" @clear="handleClear">
                                    <el-option v-for='item in orgList' :label='item.orgName' :value='item.id'
                                        :key='item.id'>
                                    </el-option>
                                    <div class="div_box" v-loading="loading" :style="loading ? '' : 'display: none;'">
                                    </div>
                                </el-select>
                            </el-form-item>

                            <el-form-item size="small" label="工单状态">
                                <el-select v-model="search_val.status" placeholder="工单状态" size="small" clearable
                                    style="width: 360px; margin-left: 15px">
                                    <el-option v-for="(item, i) in statusList" :key="i" :label="item.name"
                                        :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item size="small" label="日期">
                                <el-date-picker v-model.trim="timeArr" type="datetimerange" range-separator="至"
                                    start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss"
                                    :default-time="['00:00:00', '23:59:59']" :picker-options="pickerOptions" clearable
                                    style="width: 360px"></el-date-picker>
                            </el-form-item>
                        </el-form>
                        <div class="footer" style="text-align: right">
                            <el-button size="small" @click="resetClick1" class="cancel-button">重 置</el-button>
                            <el-button size="small" @click="searchClick1" class="confirm-button">
                                确 定
                            </el-button>
                        </div>
                    </div>
                    <el-button size="small" style="
                            margin-left: 15px;
                            background: #7367f0;
                            color: #fff;
                            border: none;
                            font-size: 14px;
                            padding: 8px 15px;
                        " slot="reference">
                        高级搜索
                        <i class="el-icon-search" style="margin-left: 5px; font-size: 12px"></i>
                    </el-button>
                </el-popover>


            </div>
        </div>
        <div class="content">
            <el-table :data="dataList" height="calc(100% - 65px)" class="table" ref="refTable" row-key="id"
                :header-cell-style="headerStyle">
                <el-table-column align="center" label="序号" type="index" width="80" height="30"></el-table-column>
                <el-table-column align="center" prop="name" label="工单名称" min-width="100"
                    show-overflow-tooltip></el-table-column>
                <el-table-column align="center" prop="number" label="工单号" min-width="100"
                    show-overflow-tooltip></el-table-column>
                <el-table-column align="center" prop="orgName" label="联网单位" min-width="100"
                    show-overflow-tooltip></el-table-column>

                <el-table-column align="center" prop="type" label="工单类型" min-width="120" show-overflow-tooltip>
                    <template slot-scope="{ row }">
                        <el-tag v-if="row.type == 0" type="danger">设备上报工单</el-tag>
                        <el-tag v-else-if="row.type == 1" type="warning">人工上报工单</el-tag>
                        <el-tag v-else-if="row.type == 2" type="danger">告警工单</el-tag>
                        <el-tag v-else-if="row.type == 3" type="warning">抄送工单</el-tag>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="status" label="工单状态" min-width="120" show-overflow-tooltip>
                    <template slot-scope="{ row }">
                        <el-tag v-if="row.status == 1" type="warning">待派单</el-tag>
                        <el-tag v-else-if="row.status == 2" type="warning">待接单</el-tag>
                        <el-tag v-else-if="row.status == 3" type="warning">修复中</el-tag>
                        <el-tag v-else-if="row.status == 4" type="success">已完成</el-tag>
                        <!-- <el-tag v-else-if="row.status == 5" type="warning">待上报人审核</el-tag> -->
                        <el-tag v-else-if="row.status == 6" type="success">已完成</el-tag>
                        <el-tag v-else-if="row.status == 7" type="danger">已忽略</el-tag>
                    </template>
                </el-table-column>

                <el-table-column align="center" prop="createTime" label="创建时间" min-width="100"
                    show-overflow-tooltip></el-table-column>

                <el-table-column align="center" label="操作" width="140">
                    <template slot-scope="{ row }">
                        <div style="display: flex;align-items: center;justify-content: center;">
                            <el-tooltip class="item" effect="dark" content="工单处理" placement="bottom"
                                v-if="row.status != 6 && row.status != 7 && row.status != 4">
                                <i @click="onHandle(row)" class="iconfont tixianchuli tableBtnIcon"></i>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="工单详情" placement="bottom">
                                <i @click="onDetails(row)" class="iconfont xiangqing tableBtnIcon"></i>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="忽略工单" placement="bottom"
                                v-if="row.status != 6 && row.status != 7 && row.status != 4">
                                <i @click="onLose(row)" class="iconfont gongdan_weixuanzhong tableBtnIcon"
                                    style="font-size: 21px;"></i>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <pagination :page.sync="page" :limit.sync="limit" :total="total" @pagination="getDataList"
                class="pagination">
            </pagination>
        </div>

        <workHandle ref="refworkHandle" :editInfo="editInfo"></workHandle>
        <workDetails ref="refworkDetails" :editInfo="editInfo"></workDetails>
    </div>
</template>

<script>
import {
    reqWorkOrderPage,
    reqWorkOrderUpdate,
    reqClosedLoop
} from '@api/api.js';
import tableStyleMixin from '@mixin/table-style';
import Pagination from '@components/Pagination.vue';
import { mapState } from 'vuex';
import advanceSearchMixin from "./mixins/advanceSearch.js";//高级搜索
import loadMore from "@mixin/loadMore";
import workHandle from "./components/workHandle";
import workDetails from "./components/workDetails";
import TreeSearch from "@components/TreeSearch.vue";

export default {
    name: 'workOrder',
    components: {
        Pagination,
        workDetails,
        workHandle,
        TreeSearch
    },
    mixins: [tableStyleMixin, loadMore, advanceSearchMixin],
    data() {
        return {
            page: 1,
            limit: 10,
            total: 0,
            dataList: [],
            loadingSearch: false,
            timeArr: [],
            showPopover: false,
            editInfo: {},
            targetId: "",
        };
    },
    computed: {
        ...mapState(['user', "datav", "spacesManage"]),
    },
    mounted() {
        if (this.user.roleName == 'ORG_ADMIN' || this.user.roleName == 'INSTERALL_USER') {
            // 组织||装维
            this.targetId = this.spacesManage.organizationInfo.orgId;
            this.getDataList();
            this.maintenanceClear()// 维保组列表
            // this.getMaintenance(); // 维保组列表
        } else {
            this.getDataList();
            this.maintenanceClear()// 维保组列表
            // this.getMaintenance(); // 维保组列表
        }
        if (this.user.roleName == 'INSTERALL_USER' || this.user.roleName == 'UNIT_ADMIN') {
            this.getOrgList()
        }
    },

    methods: {
        changeOrgId(instanceId) {
            this.targetId = instanceId.id
            this.handleClear();
        },
        onClear() {
            this.targetId = this.spacesManage.organizationInfo.orgId;
            this.page = 1;
            this.limit = 10;
            this.getDataList();
        },
        onHandle(e) {
            // console.log(e);
            this.editInfo = JSON.parse(JSON.stringify(e));
            this.$refs.refworkHandle.dialogVisible = true;
        },
        onDetails(e) {
            // console.log(e);
            this.editInfo = JSON.parse(JSON.stringify(e));
            this.$refs.refworkDetails.getWorkOrderLog(e.id)
            this.$refs.refworkDetails.dialogVisible = true;
        },
        onLose(e) {
            // console.log(e);
            this.$confirm("是否要忽略此工单?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    let res = await reqWorkOrderUpdate({
                        id: e.id,
                        userId: this.user.userId,
                        username: this.user.userName,
                        status: 10,
                        result: "忽略",
                        remark: '',
                        maintenanceUserId: '',
                        picList: [],
                        videoFile: "",
                    });
                    if (res.code !== 20000) return this.$modal.notifyWarning(res.message);

                    // 完结
                    let res2 = await reqClosedLoop({
                        id: e.alarmId,
                    });
                    if (res2.code !== 20000) return this.$modal.notifyWarning(res2.message);

                    this.$modal.notifySuccess("忽略成功！");
                    this.getDataList();
                })
                .catch(() => { });
        },
        // 工单列表
        async getDataList() {
            if (this.timeArr == null) {
                this.timeArr = "";
            }
            let params = {
                userId: this.user.userId,
                roleName: this.user.roleName,
                orgId: this.search_val.selectedValue == '' ? this.targetId : this.search_val.selectedValue,//机构||单位
                name: this.search_val.name,
                type: '2',
                status: this.search_val.status,
                maintenanceId: this.search_val.maintenanceId,
                maintenanceUserId: this.search_val.maintenanceUserId,
                startTime: this.timeArr[0],
                endTime: this.timeArr[1],
            };
            const res = await reqWorkOrderPage(this.page, this.limit, params);
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            this.dataList = res.data.rows;
            this.total = res.data.total;
        },
        // 搜索
        async searchClick() {
            this.page = 1;
            this.limit = 10;
            this.loadingSearch = true;
            await this.getDataList();
            this.loadingSearch = false;
        },
        // 清空
        clearImei() {
            this.page = 1;
            this.limit = 10;
            this.getDataList();
        },
    },
};
</script>

<style scoped lang="less">
@import url('~@views/style/tablePage.less');
@import url("~@views/style/tree.less"); //左侧组织机构样式

.header_left {
    display: flex;
}

.input_box {
    margin-right: 15px;
}

// 日期控件颜色
::v-deep .el-range-editor .el-range-input {
    background: @primaryHeaderBgcolor !important;
    color: @primaryContentTxt;
}

// 日期控件
.el-range-editor.el-input__inner {
    margin-left: 15px;
    height: 32px;
}

// 查看关联安装点
.search_space {
    padding: 0 10px;
    cursor: pointer;

    &:hover {
        color: #7367f0;
    }
}

// 下拉框加载开始
.div_box {
    height: 276px;
    position: absolute;
    top: -1px;
    left: -1px;
    width: 100%;
    z-index: 9999;
    // background: red;
    // opacity: 0.5;
}

::v-deep .el-loading-mask {
    border-radius: 4px;
}

// 下拉框加载结束

// 查询条件切换
::v-deep .sel_prepend .el-input {
    width: 100px;
}

// 搜索框
::v-deep .el_input .el-input__inner {
    border-left: none !important;
    border-radius: 0px !important;
}

::v-deep .el_Select .el-input__inner {
    border-radius: 0px !important;
}

// 高级搜索
::v-deep .el-button--primary {
    background-color: #7367f0;
    border: 1px solid #7367f0;
    color: #fff;
}

::v-deep .el-form-item__label {
    color: @primaryThemeTxtColor2;
    padding: 0px;
}

::v-deep .el-input__inner {
    color: var(--primaryContentTxt, #f1f1f1) !important;
}

.dropdown {
    background: #7367f0;
    color: #fff;
    border: none;
}

::v-deep .el-button--small {
    border: none;
}
</style>
